<template>
  <div class="chart-line-gc-root" ref="ChartLineGcRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from "vue";
import { isNull, isNotNull } from "@/assets/utils/obj";
import { getGcLineApi, getGcApi } from "@/api/guardcat";
import * as jvmTheme from './JvmTheme';
// echart
import * as echartTheme from '@/assets/styles/xz/echartTheme';
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, DataZoomComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, TooltipComponent, DataZoomComponent, LegendComponent, LineChart, UniversalTransition, CanvasRenderer]);

// -------------------- inject
const currentMachine: any = inject('currentMachine');

// -------------------- data
const ChartLineGcRef = ref<any>(null);
let chartLineGc: any;
let chartData = {
  x: [],
  youngs: [],
  fulls: [],
  young: {
    totalGcCount: "0", totalGcTime: "0"
  },
  full: {
    totalGcCount: "0", totalGcTime: "0"
  }
}

const getJvmGcLine = (field?: any) => {
  if (isNull(field)) {
    field = 'hu';
  }
  getGcLineApi({ machineId: currentMachine.value.machineId }).then(resp => {
    chartData.x = resp.data.x;
    chartData.youngs = resp.data.y;
    chartData.fulls = resp.data.f;
    getGcApi({ machineId: currentMachine.value.machineId }).then(resp => {
      if (isNotNull(resp.data.young)) {
        chartData.young = resp.data.young;
      }
      if (isNotNull(resp.data.full)) {
        chartData.full = resp.data.full;
      }
      renderChart();
    })
  });
}

const renderChart = () => {
  chartLineGc.setOption({
    title: {
      text:
        'YGC次数[' + chartData.young.totalGcCount + '] YGC总用时[' + chartData.young.totalGcTime + 'ms]\n' +
        'FGC次数[' + chartData.full.totalGcCount + '] FGC总用时[' + chartData.full.totalGcTime + 'ms]',
      right: 0,
      textStyle: echartTheme.title().textStyle
    },
    legend: { ...echartTheme.legend(), ...{ selected: { 'Full GC': false } } },
    grid: { left: 10, right: 20, bottom: 10, top: 30, containLabel: true },
    xAxis: { type: 'category', data: chartData.x.map((item: any) => item.replaceAll(' ', '\n')) },
    yAxis: { splitLine: { lineStyle: { color: [echartTheme.common().axisLineColor] } } },
    tooltip: echartTheme.tooltip(),
    series: [
      {
        z: 1,
        id: "Young GC",
        name: 'Young GC',
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.youngs,
        lineStyle: { width: 2 },
        itemStyle: { color: jvmTheme.clr().metaspace },
        areaStyle: { color: jvmTheme.clr().metaspace }
      },
      {
        z: 2,
        id: "Full GC",
        name: 'Full GC',
        type: 'line',
        stack: 'Part',
        showSymbol: true,
        sampling: 'lttb',
        show: false,
        data: chartData.fulls,
        lineStyle: { width: 1 },
        itemStyle: { color: jvmTheme.clr().oldLine },
        areaStyle: { color: jvmTheme.clr().old }
      }
    ]
  });
}

onMounted(() => {
  chartLineGc = echarts.init(ChartLineGcRef.value);
  chartLineGc.resize();
})

defineExpose({
  getJvmGcLine
})
</script>

<style scoped lang="scss">
.chart-line-gc-root {
  @include box(100%, 100%);
}
</style>